<template>
  <div>
    <div class="page-buy-card">
      <div class="card-header">
        <div class="header-img">
          <img v-if="clothChoose" :src="errorImg" class="order-img">
          <img v-else :src="IMG_SERVICE_ADDR + this.clothUrl" :data-img="IMG_SERVICE_ADDR + this.clothUrl" class="order-img" @click="lookImg">
        </div>
        <div class="header-desc">
          <div class="price-info">
            <span class="price-unit">￥</span>
            <span class="price">{{price}}</span>
          </div>
          <div class="choose-cloth">
            选择 {{clothTitle}}
          </div>
        </div>
      </div>
      <div class="card-content">
        <!--布料-->
        <div class="card-list-info">
          <div class="card-list-title">布料</div>
          <ul class="cloth-list">
            <li @click="clothSel(bl.priceId, bl.clothUrl, bl.clothTitle, bl.price)" class="cloth-list-item" v-for="(bl, index) of clothList" :key="index">
              <span style="font-size:12px;">{{bl.clothTitle}}</span>
            </li>
          </ul>
        </div>
        <!--小孩尺寸-->
        <div class="card-list-info">
          <div class="card-list-title">尺寸</div>
          <van-field
            readonly
            clickable
            label="小孩"
            :value="childSel"
            placeholder="选择小孩"
            @click="showChildPicker = true"></van-field>
          <van-popup v-model="showChildPicker" round position="bottom">
            <van-picker
              show-toolbar
              :columns="childColumns"
              cancel-button-text="添加小孩"
              @cancel="addChild"
              @confirm="childChange"></van-picker>
          </van-popup>
          <!--身高，体重，三维-->
          <div class="child-info">
            <van-row>
              <van-col span="12">
                <div class="child-item">
                  <p class="child-item-p">身高</p>
                  <input class="child-item-input" type="text" placeholder="请输入胸围" v-model="childDetail.height"/>
                </div>
              </van-col>
              <van-col span="12">
                <div class="child-item">
                  <p class="child-item-p">体重</p>
                  <input type="text" class="child-item-input" placeholder="请输入腰围" v-model="childDetail.weight"/>
                </div>
              </van-col>
            </van-row>
            <van-row>
              <van-col span="12">
                <div class="child-item">
                  <p class="child-item-p">胸围</p>
                  <input class="child-item-input" type="text" placeholder="请输入胸围" v-model="childDetail.bust"/>
                </div>
              </van-col>
              <van-col span="12">
                <div class="child-item">
                  <p class="child-item-p">腰围</p>
                  <input type="text" class="child-item-input" placeholder="请输入腰围" v-model="childDetail.waist"/>
                </div>
              </van-col>
            </van-row>
            <van-row>
              <van-col span="12">
                <div class="child-item">
                  <p class="child-item-p">臀围</p>
                  <input type="text" class="child-item-input" placeholder="请输入臀围" v-model="childDetail.hipline"/>
                </div>
              </van-col>
              <van-col span="12">

              </van-col>
            </van-row>


          </div>
        </div>
        <!--购买数量-->
        <div class="card-num-info">
          <p class="card-num-p">购买数量</p>
          <div class="num-add">
            <van-button size="mini" @click="jian">-</van-button>
            <p class="num">{{num}}</p>
            <van-button size="mini" @click="jia">+</van-button>
          </div>
        </div>
        <!--留言-->
        <div class="card-remake-info">
          <van-field
            v-model="remake"
            rows="2"
            autosize
            label="留言"
            label-class="remake"
            type="textarea"
            maxlength="50"
            :show-word-limit="true"
            placeholder="请备注留言" >
          </van-field>
        </div>
      </div>
      <i role="button" tabindex="0" ><!----></i>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="cart-o" text="购物车" @click="goCart" />
      <van-goods-action-icon icon="shop-o" text="店铺" @click="onClickIcon"/>
      <van-goods-action-button type="warning" text="加入购物车" @click="addCart" />
      <van-goods-action-button type="danger" text="立即购买" @click="pay" />
    </van-goods-action>
  </div>
</template>

<script>
import https from '@/common/https.js'
import {IMG_SERVICE_ADDR} from '@/config/configConstant.js' // 常量参数
import commonjs from '@/common/commonUtils.js'
import errorImg from '@/assets/img/error.jpg'
import {ImagePreview} from "vant";

export default { // 子组件在使用时，首次加载触发created以及mounted 再次进入时触发activated
  name: 'buyCard',
  data () {
    return {
      goodsId: '',
      openId: '',
      priceId: '',
      IMG_SERVICE_ADDR: IMG_SERVICE_ADDR,
      errorImg: errorImg,
      clothUrl: '',
      clothTitle: '布料',
      clothChoose: true,
      price: '0.00',
      num: 1,
      changeRed: -1,
      childDetail: {
        height: '',
        weight: '',
        bust: '',
        waist: '',
        hipline: '',
      },
      remake: '',
      showChildPicker: false,
      childColumns: [],
      childSel: '',
      childList: [
      //   {
      //   childId: 1,
      //   childName: '郭飞',
      //   bust: 50,
      //   waist: 0,
      //   hipline: 100
      // }
      ],
      clothList: [
      // {
      //   priceId: 1,
      //   clothUrl: 'https://img.yzcdn.cn/2.jpg',
      //   clothTitle: '红色',
      //   price: '200.21'
      // }
      ]
    }
  },
  props: ['shopId'],
  methods: {
    goCart () {
      this.$router.push({path: '/cart', query: {show: true}})
    },
    //添加小孩
    addChild(){
      this.$router.push('/child')
    },
    //选择小孩
    childChange(value, i) {
      console.log(i)
      this.childSel = value;
      this.showChildPicker = false;
      this.childDetail.weight = this.childList[i].weight
      this.childDetail.height = this.childList[i].height
      this.childDetail.bust = this.childList[i].bust
      this.childDetail.waist = this.childList[i].waist
      this.childDetail.hipline = this.childList[i].hipline
    },
    //预览图片
    lookImg(e){
      let img = e.target.dataset.img
      ImagePreview({images: [img], startPosition: 0});//this.images为图片资源
    },
    jia () { // 数据加
      this.num++
    },
    jian () { // 数量减
      if (this.num === 1) {
        this.num = 1
      } else {
        this.num--
      }
    },
    onClickIcon () {
      this.$toast('暂时开发中！')
    },
    pay () {
      this.$router.push({path: '/orderPay', query: {orderId: '1,4'}})

      //校验参数
      // if (this.priceId === ""){
      //   this.$toast('请选择布料')
      //   return
      // }
      // if (this.childDetail.height === "" || this.childDetail.weight === "" || this.childDetail.bust === ""
      //   || this.childDetail.waist === "" || this.childDetail.hipline === ""){
      //   this.$toast('请填写所有尺寸信息')
      //   return
      // }
      // //提取拼接参数
      // let orderPay = {}
      // orderPay.shopId = this.shopId
      // orderPay.orderAmount = this.price * this.num
      // orderPay.openId = this.openId
      // let orderDetailPay = {}
      // orderDetailPay.money = this.price
      // orderDetailPay.clothNumber = this.num
      // orderDetailPay.priceId = this.priceId
      // // height，weight，bust，waist，hipline
      // orderDetailPay.height = this.childDetail.height
      // orderDetailPay.weight = this.childDetail.weight
      // orderDetailPay.bust = this.childDetail.bust
      // orderDetailPay.waist = this.childDetail.waist
      // orderDetailPay.hipline = this.childDetail.hipline
      // orderDetailPay.remake = this.remake
      //
      // orderPay.orderDetail = orderDetailPay
      // // 拼接订单详情信息，后台生成预支付订单，然后跳转支付页面进行选择地址支付
      // https.fetchPost('/order/webs/addOrder', orderPay).then((data) => {
      //   if (data.status === 200) {
      //     this.$router.push({path: '/orderPay', query: {orderId: data.data}})
      //   } else {
      //     this.$toast(data.msg)
      //   }
      // }).catch(err => {
      //   this.$toast('提交订单异常！！！')
      //   console.log(err)
      // })
    },
    addCart () {
      this.$toast('已添加购物车')
      this.$router.push({path: '/cart', query: {show: true}})
    },
    initBuy () {
      this.goodsId = this.$route.query.goodsId
      // 从当前缓存中获取微信id
      let isWchat = commonjs.is_wexin()
      if (isWchat) {
        let wechat = JSON.parse(commonjs.getStorage('wechat'))
        if (wechat !== null) { // 判断是否微信授权登录
          this.openId = wechat.openId
        }
      } else {
        console.log('oYg_DvxtyjYRXzYDIF7rxAEnmgFE')
        this.openId = 'oYg_DvxtyjYRXzYDIF7rxAEnmgFE'
      }
      console.log('子组件刷新成功')
      this.constantInit()
      this.getClothPriceList()
      this.getChildList()
    },
    getClothPriceList () { // 获取布料价格列表
      console.log('getClothPriceList goodsId:' + this.goodsId)
      let params = {}
      params.goodsId = this.goodsId
      https.fetchPost('/goods/webs/findWebGoodsPriceList', params).then((data) => {
        let prices = data.data
        if (prices !== null) {
          this.clothList = prices
        }
      }).catch(err => {
        console.log(err)
      })
    },
    getChildList () { // 获取小孩列表
      console.log('接口刷新小孩列表数据')
      let params = {}
      params.openId = this.openId
      https.fetchPost('/child/webs/findChildList', params).then((data) => {
        let child = data.data
        if (child !== null) {
          this.childList = child
          let childNames = child.map((v, i, a) =>{
            return v.childName
          })
          this.childColumns = childNames
        }
      }).catch(err => {
        console.log(err)
      })
    },
    clothSel (priceId, clothUrl, clothTitle, price) { // 选择布料点击事件
      this.clothChoose = false
      this.clothInit()
      this.priceId = priceId
      this.clothUrl = clothUrl
      this.clothTitle = clothTitle
      this.price = (Math.round(price * 100) / 100).toFixed(2)
    },
    constantInit () { // 常量初始化
      this.clothChoose = true
      this.clothUrl = this.errorImg
      this.price = 0.00
      this.clothTitle = '布料'
      this.num = 1
      this.childSel = ''
      this.remake = ''
    },
    clothInit () {
      var h = document.getElementsByClassName('cloth-list-item')
      for (var i = 0; i < h.length; i++) {
        h[i].style.color = '#2c3150'
        h[i].style.backgroundColor = '#f2f2f2'
      }
    }
  },
  activated () {
    console.log('goodsDetail buyCard activated')
    this.initBuy()
    this.clothInit()
  },
  mounted () {
    console.log('goodsDetail buyCard mounted')
    this.initBuy()
    setTimeout(() => {
      var h = document.getElementsByClassName('cloth-list-item')
      for (var i = 0; i < h.length; i++) {
        h[i].onclick = function () {
          this.style.color = '#d82600'
          this.style.backgroundColor = '#f5d7d7'
        }
      }
    }, 500)
  }
}
</script>
<style lang="scss" scoped>
  .page-buy-card{
    z-index: 2010;
    text-align: -webkit-left;
    padding-bottom:50px;
    /*头部*/
    .card-header{
      height:100px;
      margin-top: 15px;
      overflow: hidden;
      margin-left:10px;
      /*商品图片*/
      .header-img{
        width:150px;
        height:100px;
        float: left;
        .order-img{
          min-width:150px;
          max-width:150px;
          max-height:100px;
        }
      }
      /*商品价格以及布料信息*/
      .header-desc{
        text-align: -webkit-left;
        height:100px;
        line-height:35px;
        font-size: 12px;
        margin-left: 165px;
        .price-info{
          color:#ee0a24;
          .price-unit{
            font-size: 12px;
          }
          .price{
            font-size: 16px;
          }
        }
        .choose-cloth{
          display: inline-block;
        }
      }

    }
    /*内容*/
    .card-content{
      /*布料，尺寸*/
      .card-list-info{
        width:100%; min-height:65px; overflow:hidden;
        .card-list-title{
          height:40px; line-height:40px; margin-left:10px;
        }
        .cloth-list{
          .cloth-list-item{
            min-width: 20%;
            height:25px;
            text-align: center;
            padding: 8px;
            float: left;
            background: #f2f2f2;
            margin-left: 10px;
            color: #2c3150;
            line-height: 25px;
            margin-bottom: 5px;
          }
        }
        .child-info{
          width:100%;
          position:relative;
          font-size:14px;
          margin-left: 7px;
          .child-item{
            height:40px; line-height:40px;
            .child-item-p{
              display: inline;position: relative;left: 10px;color: #888989;
            }
            .child-item-input{
              border: none;display: inline;position: relative;left: 40px;width: 45%;
            }
          }
        }

      }
      /*购买数量*/
      .card-num-info{
        border-top: 1px solid #f2f3f5;
        height:40px;
        line-height:40px;
        margin-left:10px;
        padding-top: 5px;
        .card-num-p{
          display:inline;
        }
        .num-add{
          display:inline;
          float:right;
          margin-right: 10px;
          .van-button--mini{
            width: 50px;
            height: 24px;
          }
          .num{
            background:#f2f2f2;
            text-align: center;
            width: 25px;
            height: 24px;
            line-height: 24px;
            margin: 0;
            display: inline-block;
          }
        }
      }
      /*备注*/
      .card-remake-info{
        margin-left: 10px;
        padding-top: 5px;
        .van-cell{
          padding: 10px 10px 10px 0;
          >>> .remake{
            color: #2c3e50;
            span{
              font-size: 16px;
            }
          }
        }
      }
    }
  }

</style>
